// 覆盖全局样式

@prefix: ms;

.@{prefix} {
  // 多列布局 自适应
  &-grid-content {
    --min: 352px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
    column-gap: 70px;
    // row-gap: 24px;
    align-content: flex-start;
    margin-bottom: 20px;
  }
  &-input {
    height: 56px;
    padding: 0 12px;
    .arco-input {
      padding: 0;
      line-height: 1;
    }
  }

  &-select {
    height: 56px;
    padding: 12px;
  }

  &-params-view {
    .@{prefix}-form-item {
      align-items: center;
      .arco-form-item-label {
        color: #000;
      }
      .arco-form-item-label-col {
        justify-content: flex-start;
      }
    }

    .@{prefix}-input {
      background-color: transparent;
      border-color: #bdbdbd;
      border-radius: 3px;
      &.arco-input-focus,
      &:focus-within {
        border-color: rgb(var(--primary-6));
      }
      &.arco-input-error,
      &.arco-input-error:focus-within {
        border-color: rgb(var(--danger-6));
      }
    }
    .@{prefix}-select {
      background-color: transparent;
      border-color: #bdbdbd;
      border-radius: 3px;
      // &.arco-input-focus,
      // &:focus-within {
      //   border-color: rgb(var(--primary-6));
      // }
      // &.arco-input-error,
      // &.arco-input-error:focus-within {
      //   border-color: rgb(var(--danger-6));
      // }
    }
  }
}

// 添加全局变量
:root {
  --color-1: #4f4f4f; // 其他默认字体颜色
  --color-2: #333; //
  --color-3: #828282;
}

// 结果页撑满页面
.result {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--color-bg-1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0 0 0 0;
  z-index: 199;
}

// 列表页面的通用背景样式
.page-view {
  background-color: @pageBg;
  padding: 0 14px 0;
  overflow: hidden;
  color: @textColor2;
}

.action-view {
  padding-bottom: 40px;
  padding: 16px 20px;
  border-radius: 4px;
  background-color: var(--color-bg-3);
  box-shadow: @boxShadow;
}

.arco-btn-text {
  // 编辑页面的返回按钮
  &.ms-back {
    color: var(--color-2);
    font-size: var(--font-size);
  }
  &.ms-back:hover {
    color: var(--color-2);
  }
}
